<template>
    <div id="CallStudent" v-show="students_with_call_info.length > 0">
      <div class="block" style="padding-left: 30px; padding-top: 50px">
        <div>
          <span class="demonstration">选择:</span>
          <el-cascader
            v-model="students_with_call_info.z_t_j"
            :options="options"
            clearable
            @change="handleChange"></el-cascader>
          <el-button type="primary" @click="submitCall">提交本次考勤</el-button>
        </div>
        <el-table :data="students_with_call_info"
                   style="width: 100%;margin-top: 50px"
                   height="950">-
          <el-table-column
            fixed
            prop="id"
            label="id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="u_name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="u_num"
            label="学号"
            width="120">
          </el-table-column>

          <el-table-column label="当前状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="students_with_call_info[scope.$index].s.type">{{students_with_call_info[scope.$index].s.text}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleSetting(scope.$index, scope.row, 0)">出勤</el-button>
              <el-button
                size="mini"
                type="warning"
                @click="handleSetting(scope.$index, scope.row, 1)">迟到</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleSetting(scope.$index, scope.row, 2)">缺勤</el-button>
              <el-button
                size="mini"
                type="success"
                @click="handleSetting(scope.$index, scope.row, 3)">请假</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
  import {zhou} from '../../data'
  import {mapState, mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapState(['students_with_call_info']),
    },
    name: 'CallStudent',
    data() {
      return {
        value: [],
        options: zhou
      }
    },
    methods: {
      handleChange(value) {
        this.$store.dispatch('change_state_of_call_info_by_z_t_j', {value})
      },
      handleSetting(index, row, s) {
        this.$store.dispatch('change_state_of_call_info', {index, s})
        this.$set(this.$store.state.students_with_call_info, index, row)
      },
      submitCall() {
        const b = confirm('确认提交本次考勤吗？')
        if(b) {
          this.$store.dispatch('submit_call')
        }
      }
    }
  }
</script>

<style scoped>
  #CallStudent {
    background-color: white;
    height: 1000px;
  }
</style>
